<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>

<title></title>

<script type="text/javascript">
	$(function() {

		//关闭添加窗口
		$("#add").dialog("close");
		$("#modify").dialog("close");

		//表格
		$('#dg').datagrid({
			url : '${pageContext.request.contextPath}/updatesalary',
			columns : [ [ {
				field : 'checkbox',
				checkbox : true,
				width : 100,
			},{
				field : 'sal_id',
				title : '工资编号',
				width : 100,
				hidden:true,
			}, {
				field : 'e_number',
				title : '员工编号',
				width : 100
			}, {
				field : 'e_name',
				title : '员工姓名',
				width : 100
			}, {
				field : 'sal_base',
				title : '基本工资',
				width : 100,
			}, {
				field : 'sal_bonus',
				title : '每次加班工资',
				width : 100,
			}, {
				field : 'sal_fine',
				title : '每次缺勤罚款',
				width : 100,
			}, {
				field : 'sal_date',
				title : '日期',
				width : 100,
			} ] ],
			pagination : true,
			striped : true,
			toolbar : '#tb',
		});

		//配置添加表单
		$("#addform").form({
			url : '${pageContext.request.contextPath}/addsalary',
			success : function(flag) {
				if (flag == "1") {
					alert("添加成功！");
					$("#add").dialog("close");
				} else if (flag == "-1") {
					alert("在员工表里并没有你输入的员工哦亲！")
				} else {
					alert("此员工这个月的工资配置已经存在啦！请前往修改")
				}
				$("#dg").datagrid("load");
			}
		})
		//添加按钮
		$('#addbt').bind('click', function() {
			$("#addform").form("clear");
			$("#add").dialog("open");
		});

		//配置修改表单
		$("#modifyform").form({
			url : '${pageContext.request.contextPath}/modifysalary',
			success : function(flag) {
				if (flag == "1") {
					$.messager.confirm('提示', '修改成功', function(r) {
						if (r) {
							$("#dg").datagrid("load");
							$("#modify").dialog("close");
						}
					})
				} else {
					$.messager.confirm('提示', '修改失败');
				}

			}
		})
		//修改按钮
		$("#modifybt").bind("click", function() {
			$("#modifyform").form("clear");
			var emps = $("#dg").datagrid("getSelections");
			if (emps.length != 1) {
				$.messager.confirm('提示', '请选择一条数据', function(r) {
					if (r) {
						$("#dg").datagrid('unselectAll');
					}
				})
			} else {
				$("#modify").dialog("open");
				var emp = emps[0];
				$("#modifyform").form("load", emp);
			}
		})
		
		//配置日历搜索框
		$('#datetime1').datebox({
			required : true,
			width : 200,

		});
		
		
		
	});

	//提交添加表单
	function addSalary() {
		$("#addform").form("submit");
	}
	//提交修改表单
	function modifySalary() {
		$("#modifyform").form("submit");
	}
</script>

</head>
<body>

	<!-- 表格 -->
	<table id="dg" style="width: 630px;"></table>
	<!-- 工具栏 -->
	<div id="tb">
		<a id="addbt" class="easyui-linkbutton">添加</a> 
		<a id="modifybt" class="easyui-linkbutton">修改</a> 
	</div>

	<!-- 添加窗口 -->
	<div id="add" class="easyui-dialog" title="添加窗口"
		style="width: 400px; height: 450px;" data-options="modal:true">
		<form id="addform" method="post">
			<div style="margin-bottom: 20px;">
				<span>员工编号</span> <input class="easyui-textbox" name="e_number"
					style="width: 100%;">
			</div>
			<div style="margin-bottom: 20px">
				<span>员工姓名</span> <input class="easyui-textbox" name="e_name"
					style="width: 100%" data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>基本工资</span> <input class="easyui-textbox" name="sal_base"
					style="width: 100%" data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>每次加班工资</span> <input class="easyui-textbox" name="sal_bonus"
					style="width: 100%" data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>每次缺勤工资</span> <input class="easyui-textbox" name="sal_fine"
					style="width: 100%" data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>日期</span> <input type="text" id="datetime1" name="sal_date" editable="false">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0">
			<a class="easyui-linkbutton" onclick="addSalary()"
				style="width: 80px">提交</a>
		</div>
	</div>

	<!-- 修改窗口 -->
	<div id="modify" class="easyui-dialog" title="添加窗口"
		style="width: 400px; height: 450px;" data-options="modal:true">
		<form id="modifyform" method="post">
			<div style="margin-bottom: 20px;">
				<span>员工编号</span> <input class="easyui-textbox" name="e_number"
					style="width: 100%;" data-options="readonly:true">
			</div>
			<div style="margin-bottom: 20px">
				<span>员工姓名</span> <input class="easyui-textbox" name="e_name"
					style="width: 100%" data-options="readonly:true">
			</div>
			<div style="margin-bottom: 20px">
				<span>基本工资</span> <input class="easyui-textbox" name="sal_base"
					style="width: 100%" data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>每次加班工资</span> <input class="easyui-textbox" name="sal_bonus"
					style="width: 100%" data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>每次缺勤工资</span> <input class="easyui-textbox" name="sal_fine"
					style="width: 100%" data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>日期</span> <input class="easyui-textbox" name="sal_date"
					style="width: 100%" data-options="readonly:true">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0">
			<a class="easyui-linkbutton" onclick="modifySalary()"
				style="width: 80px">提交</a>
		</div>
	</div>



</body>

<!-- 修改datebox源代码 -->
<script type="text/javascript">
	$(function() {
		$('#datetime1')
				.datebox(
						{
							onShowPanel : function() {// 显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层    
								span.trigger('click'); // 触发click事件弹出月份层    
								if (!tds)
									setTimeout(
											function() {// 延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔    
												tds = p
														.find('div.calendar-menu-month-inner td');
												tds
														.click(function(e) {
															e.stopPropagation(); // 禁止冒泡执行easyui给月份绑定的事件    
															var year = /\d{4}/
																	.exec(span
																			.html())[0]// 得到年份    
															month = parseInt($(
																	this).attr(
																	'abbr'), 10) + 1; // 月份    
															$('#datetime1')
																	.datebox(
																			'hidePanel')
																	// 隐藏日期对象    
																	.datebox(
																			'setValue',
																			year
																					+ '-'
																					+ month); // 设置日期的值    
														});
											}, 0);
							},
							parser : function(s) {// 配置parser，返回选择的日期    
								if (!s)
									return new Date();
								var arr = s.split('-');
								return new Date(parseInt(arr[0], 10), parseInt(
										arr[1], 10) - 1, 1);
							},
							buttons : [],
							formatter : function(d) {
								var month = d.getMonth();
								if (month < 10) {
									month = "0" + month;
								}
								if (d.getMonth() == 0) {
									return d.getFullYear() - 1 + '-' + 12;
								} else {
									return d.getFullYear() + '-' + month;
								}
							}// 配置formatter，只返回年月    
						});
		var p = $('#datetime1').datebox('panel'), // 日期选择对象    
		tds = false, // 日期选择对象中月份    
		span = p.find('span.calendar-text'); // 显示月份层的触发控件    

	});
</script>

</html>